<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php bloginfo( 'name' );?></title>
<link href="<?php bloginfo( 'stylesheet_url' );?>" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo( 'template_url' );?>/css/jimgMenu.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo( 'template_url' );?>/css/media.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="<?php bloginfo( 'template_url' );?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'template_url' );?>/js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'template_url' );?>/js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript">
$(document).ready(function () {

	$("li.home a").animate({width: "320px"}, {duration: 450, easing:"easeOutQuad"});
  // find the elements to be eased and hook the hover event
  $('div.jimgMenu ul li a').hover(function() {
    
    // if the element is currently being animated (to a easeOut)...
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "320px"}, {duration: 450, easing:"easeOutQuad"});
    } else {
      // ease in quickly
      $(this).stop().animate({width: "320px"}, {duration: 400, easing:"easeOutQuad"});
    }
	
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
	     $(this).stop().animate({width: "80px"}, {duration: 400, easing:"easeInOutQuad"})
		 
    } else {
      // ease out slowly
    	$(this).stop('animated:').animate({width: "80px"}, {duration: 450, easing:"easeInOutQuad"});
		$("li.home a").animate({width: "80px"}, {duration: 450, easing:"easeOutQuad"});
    }
	
  });
});
</script>

<?php wp_head();	?>
</head>

<body>

<header>
<!-- Header Starts -->

	<section class="logo">
    <a href="<?php bloginfo('siteurl')?>/home/">
		<img src="<?php bloginfo( 'template_url' );?>/images/logo.png" alt="FadiGaziri Logo" title="Logo" />
    </a>
    </section>
        
	<section class="social">
		<a href="<?php _e(get_option('nm_fadi_linkedin_link'))?>"><img src="<?php bloginfo( 'template_url' );?>/images/linkedin_32.png" alt="<?php _e(get_option('nm_fadi_linkedin_link'))?>" /></a>
		<a href="<?php _e(get_option('nm_fadi_fb_link'))?>"><img src="<?php bloginfo( 'template_url' );?>/images/facebook_32.png" alt="<?php _e(get_option('nm_fadi_linkedin_link'))?>" /></a>
		<a href="<?php _e(get_option('nm_fadi_linkedin_link'))?>"><img src="<?php bloginfo( 'template_url' );?>/images/twitter_32.png" alt="<?php _e(get_option('nm_fadi_twitter_link'))?>" /></a>
    </section>
    
    <div class="height_increaser"></div><!-- Just to increase height automatically -->
        
	<section class="banner">
    	<div class="jimgMenu">
		  <ul>
		    <li class="home"><a href="http://fadigaziri.com/wp2/home/">Home</a></li>
		    <li class="biography"><a href="http://fadigaziri.com/wp2/biography/">Biography</a></li>
		    <li class="music"><a href="http://fadigaziri.com/wp2/my-audios/">Music</a></li>
		    <li class="media"><a href="http://fadigaziri.com/wp2/media/">Media</a></li>
		    <li class="shop"><a href="http://fadigaziri.com/wp2/shop/">Shop</a></li>
		    <li class="contact"><a href="http://fadigaziri.com/wp2/contact-us/">Contact</a></li>
		  </ul>
		</div>
    </section>
    
<!-- Header Ends -->
</header>
